// import store from '@/store'
// import { on } from 'element-ui/src/utils/dom'
// import { Message } from 'element-ui'

// v-html v-if v-show v-for ....
// 指令的作用：操作DOM
// 自定义指令的作用： 自定义一个指令来实现对DOM的操作
// 需求: 通过自定义指令的形式解决异常图片的处理  (对DOM操作的需求)
// 如何定义自定义指令：
export const imgerror = {
  // 指令所在的DOM节点插入文档中的时候触发
  inserted(el, binding) {
    // console.log("指令所在的DOM节点插入文档中的时候触发");
    // el 是指令所的DOM节点信息
    // binding 是指令所包含的信息
    // console.log(el);
    // console.log(binding.value);  // 指令绑定的数据值
    // 图片、音频、视频标签等资源标签都有一个原生的事件叫做onerror，就是当加载出错的时候触发
    el.src = el.src || binding.value
    el.onerror = () => {
      //   console.log("图片加载不出来");
      // 重新给img标签的src赋值
      el.src = binding.value
    }
  },
  // 指令所在的组件更新的时候
  componentUpdated(el, binding) {
    // console.log("指令所在的DOM节点componentUpdated文档中的时候触发");
    el.src = el.src || binding.value
  }
}

// 图片加载失败受损或者没有图，用占位功能
export const imgpix = {
  inserted(el, binding) {
    if (el.src) {
      el.onerror = function() {
        // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
        el.src = binding.value // 这里不能写死
      }
    } else {
      // 如果没有配置src，且使用该指令可以实现默认图
      el.src = binding.value
    }
  }
}

// 按钮权限指令
// export const permission = {
//   bind(el, binding, vnode) {
//     const mark = binding.value
//     if (!mark) {
//       return new Error('请输入权限标识')
//     }
//     const idx = store.getters.permission_btn_list.findIndex(val => val.permission_mark === mark)
//     if (idx > -1) {
//       return
//     }
//     // 禁用 click 兼容性检测
//     if (!vnode.componentInstance) {
//       alert('v-permission 不支持用在普通dom元素')
//       return
//     }
//     if (vnode.data.nativeOn && vnode.data.nativeOn.click) {
//       alert('v-permission 不支持 click.native')
//       return
//     }
//     // 禁用点击事件(组件）
//     if (vnode.componentInstance) {
//       vnode.componentInstance.$off('click')
//     }
//     el.onclick = function(e) {
//       e.preventDefault()
//       e.stopPropagation()
//       Message.error('您无权进行此操作')
//     }
//   }
// }

